<template>
  <KView class="bind-phone-tag">
    <KView v-for="(tagData,rowIndex) in tagDataList" :key="`row_${rowIndex}`" class="clearfix">
      <KView v-for="(item,colIndex) in tagData" :key="`col_${colIndex}`" :class="{'chekced':item.chekced}" @click="selectTag(item)">
        {{item.label}}
      </KView>
    </KView>
  </KView>
</template>

<script>
  export default {
    props: {
      option: {
        type: Array,
        required: true
      },
      limit:{
        type:Number,
        default:0
      }
    },

    data() {
      return {
        tagDataList: this.getTagDataList()
      };
    },

    methods: {
      getTagDataList() {
        let option = this.option;
        let tagDataList = [];
        let colNum = 3;
        for (let i = 0; i < option.length; i++) {
          const data = option[i];
          let arr;
          if (i % colNum === 0) {
            arr = [];
            tagDataList.push(arr);
          } else {
            arr = tagDataList[tagDataList.length - 1];
          }
          arr.push(data);
        }
        return tagDataList;
      },

      selectTag(item){
        let limit = this.limit;
        let chekced = item.chekced;
        if (limit !== 0 && !chekced) {
          let tagDataList = this.option;
          let num = 0;
          for (let i = 0; i < tagDataList.length; i++) {
            const tag = tagDataList[i];
            if (tag.chekced) {
              num++;
            }
          }
          if (num >= limit) {
            return;
          }
        }
        item.chekced = !chekced;
      }
    }
  };

</script>

<style lang="scss">
  .bind-phone-tag {
    font-size: formatPx(26);

    >div {
      height: formatPx(90);
      margin-bottom: formatPx(30);

      >div {
        float: left;
        height: 100%;
        line-height: formatPx(90);
        width: formatPx(220);
        background: #f7f7f7;
        color: #999999;
        text-align: center;
        border-radius: formatPx(45);
        margin-right: formatPx(15);

        &:last-child {
          margin-right: 0;
        }

        &.chekced {
          background: #59c264;
          color: #ffffff;
        }
      }
    }
  }

</style>
